<template>
  <el-card class="mt-20 mr-20" shadow="never">
     <el-form :disabled="permissionDisabled()"  ref="formRef" :model="form" :rules="rules" label-width="200px" label-position="left">
      <el-form-item :label="$t('pageStr.enableFtpStr')">
        <el-switch v-model="form.enabled" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <div v-if="form.enabled == '1'">
        <el-form-item :label="$t('pageStr.ftp_accountStr')" prop="username" style="max-width: 500px">
          <el-input v-model="form.username" clearable/>
        </el-form-item>
        <el-form-item :label="$t('pageStr.ftp_passwordStr')" prop="userpassword" style="max-width: 500px">
          <el-input v-model="form.userpassword" type="password" show-password clearable/>
        </el-form-item>
      </div>
    </el-form>
  </el-card>
  <el-button v-permissionShow style="margin-top: 20px;width: 110px;color: #fff" color="#C29B74" @click="handleSubmitFtp">
    {{ $t('tabsStr.applyStr') }}
  </el-button>
</template>

<script setup>
import {ref, onBeforeMount,reactive} from 'vue'
import {reqSetFtp, reqGetFtp} from '@/api/application/ftp-set'
import {ElMessage} from "element-plus";
import {useI18n} from 'vue-i18n'
import {permissionDisabled} from '@/utils'


const {t} = useI18n()
import {encrypt, decrypt} from "@/utils";

const form = ref({})
const formRef = ref(null)
const rules = {
  username: [
    {required: 'true', message: t('userEmptyTip'), trigger: 'blur'}
  ],
  userpassword: [
    {required: 'true', message: t('pwdEmptyTip'), trigger: 'blur'}
  ]
}
onBeforeMount(() => {
  getData()
})

function getData() {
  reqGetFtp().then((res) => {
    form.value = res.ftp
    form.value.userpassword = decrypt(res.ftp.userpassword || '')
    console.log('ftp读取', form.value)
  })
}

/**
 * 设置ftp
 */
function handleSubmitFtp() {
  formRef.value.validate((valid) => {
    if (!valid) {
      return
    }
    form.value.userpassword = encrypt(form.value.userpassword)
    console.log('设置ftp', form.value)
    reqSetFtp(form.value).then(() => {
      ElMessage.success(t('successTip'))
    }).catch(() => {
      ElMessage.error(t('errorTip'))
    }).finally(getData)
  })
}
</script>

<style scoped>
</style>